<template>
  <div id="app">
    <mt-header fixed :title="selected" v-show="isShow" v-if="isShow_my"></mt-header>
      <router-view />
    <keep-alive>
    </keep-alive>
    <!-- 音乐组件 -->
    <audio :src="getMusic.musicMp3Url" v-if="isShow_music" autoplay controls class="music"></audio>
    <mt-tabbar v-model="selected" fixed @click.native="change()" v-show="isShow">
      <mt-tab-item id="首页" :class="{mtItem:selected=='首页'}">
        <img slot="icon" src="./assets/首页.png" v-show="selected!='首页'">
        <img slot="icon" src="./assets/首页 (1).png" v-show="selected=='首页'">
        首页
      </mt-tab-item>
      <mt-tab-item id="分类" :class="{mtItem:selected=='分类'}">
        <img slot="icon" src="./assets/列表 (2).png" v-show="selected!='分类'">
        <img slot="icon" src="./assets/列表 (1).png" v-show="selected=='分类'">
        分类
      </mt-tab-item>
      <mt-tab-item id="购物车" :class="{mtItem:selected=='购物车'}">
        <mt-badge type="error" class="bdt">{{list.length}}</mt-badge>
        <img slot="icon" src="./assets/购物车 (1).png" v-show="selected!='购物车'">
        <img slot="icon" src="./assets/购物车.png" v-show="selected=='购物车'">
        购物车
      </mt-tab-item>
      <mt-tab-item id="我的" :class="{mtItem:selected=='我的'}">
        <img slot="icon" src="./assets/我的 (1).png" v-show="selected!='我的'">
        <img slot="icon" src="./assets/我的.png" v-show="selected=='我的'">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selected:"首页",
      isShow:true,
      isShow_my:true,
      isShow_music:true,
    }
  },
  computed:{
    list(){
      return this.$store.state.list;
    },
    getMusic(){
      return this.$store.state.musicInfo;
    }
  },
  methods: {
    change(){
      console.log(this.selected);
      sessionStorage.setItem("item",this.selected);
      if(this.selected == "首页"){
        this.$router.push("/").catch(e=>{})
      }
      if(this.selected == "分类"){
        this.$router.push("/classify").catch(e=>{})
      }
      if(this.selected == "购物车"){
        this.$router.push("/shopping").catch(e=>{})
      }
      if(this.selected == "我的"){
        this.$router.push("/mine").catch(e=>{})
      }
    }
  },
  mounted() {
    var item = sessionStorage.getItem("item");
    if(item){
      this.selected = item;
    }
  },
  // 监听属性的变化
  watch:{
    $route:{
      handler(path){
        if (path.path == "/detail" || path.path == "/login" || path.path == "/register" || path.path == "/code" || path.path == "/edit") {
          this.isShow = false
        } else {
          this.isShow = true
        }
        // 音乐控件
        if (path.path == "/detail" || path.path == "/login" || path.path == "/register" || path.path == "/code" || path.path == "/edit" || path.path == "/swipdetail" || path.path == "/shopping") {
          this.isShow_music = false
        } else {
          this.isShow_music = true
        }

        if (path.path == "/mine") {
          this.isShow_my = false;
        }else{
          this.isShow_my = true;
        }
        if(path.path == "/"){
          this.selected = "首页"
        }
        if(path.path == "/classify"){
          this.selected = "分类"
        }
        if(path.path == "/shopping"){
          this.selected = "购物车"
        }
        if(path.path == "/mine"){
          this.selected = "我的"
        }
        if(path.path == "/swipdetail"){
          this.isShow = false
        }
      },
      immediate:true
    }
  }

};
</script>

<style>
/* #app{

} */
*{
  margin: 0;
  padding: 0;
}
.shop{
  position: relative;
}
.bdt{
  position: absolute;
  top:4%;
  left: 63%;
}
.content{
  margin-top: 45px;
  margin-bottom: 62px ;
}
.mtItem{
  color: red !important;
}
.music{
    height: 20px;
    width: 100%;
    position: fixed;
    bottom: 55px;
}
</style>
